<template>
  <view class="container" :style="containerStyle">
    <!-- 顶部位置和搜索栏 -->
    <view class="header">
      <view class="location">
        <view class="location-icon">
          <image src="/static/icons/location.png"></image>
        </view>
        <text>鲁商金茂府</text>
        <view class="location-arrow">
          <text>▼</text>
        </view>
      </view>
      <view class="search-bar">
        <image class="search-icon" src="/static/icons/search.png"></image>
        <text class="search-placeholder">输入关键词</text>
      </view>
    </view>

    <!-- 轮播广告区域 -->
    <view class="banner-area" :style="bannerStyle">
      <swiper class="banner" indicator-dots autoplay circular>
        <swiper-item>
          <view class="banner-item yellow-bg">
            <view class="banner-content">
              <view class="banner-image">
                <image src="/static/banners/wallet.png" mode="aspectFill"></image>
              </view>
            </view>
          </view>
        </swiper-item>
      </swiper>
    </view>

    <!-- 功能菜单区域 -->
    <view class="menu-grid">
      <view class="menu-row">
        <view class="menu-item">
          <image src="/static/icons/campus.png"></image>
          <text>校园订餐</text>
        </view>
        <view class="menu-item">
          <image src="/static/icons/delivery.png"></image>
          <text>取送帮办</text>
        </view>
        <view class="menu-item">
          <image src="/static/icons/orders.png"></image>
          <text>我要抢单</text>
        </view>
        <view class="menu-item">
          <image src="/static/icons/job.png"></image>
          <text>兼职信息</text>
        </view>
      </view>
      <view class="menu-row">
        <view class="menu-item">
          <image src="/static/icons/consultation.png"></image>
          <text>驾校咨询</text>
        </view>
        <view class="menu-item">
          <image src="/static/icons/travel.png"></image>
          <text>旅游景区</text>
        </view>
        <view class="menu-item">
          <image src="/static/icons/bus.png"></image>
          <text>包年回家</text>
        </view>
        <view class="menu-item">
          <image src="/static/icons/benefits.png"></image>
          <text>新人福利</text>
        </view>
      </view>
    </view>

    <!-- 兴趣推荐区域 -->
    <view class="interest-section">
      <view class="section-header">
        <view class="section-title">
          <view class="indicator"></view>
          <text>兴趣推荐</text>
        </view>
        <view class="view-more">
          <text>查看更多</text>
          <text class="arrow">></text>
        </view>
      </view>
      <view class="store-grid">
        <view class="store-row">
          <view class="store-item">
            <image src="/static/stores/hotpot.png" mode="aspectFill"></image>
            <view class="store-info">
              <text class="store-name">罗森便利店</text>
              <text class="store-distance">6.1km</text>
              <view class="store-tag">便利店</view>
              <text class="store-hours">营业时间: 10:00-23:00</text>
              <text class="store-address">北京市朝阳区东城区某某路22号...</text>
            </view>
          </view>
          <view class="store-item">
            <image src="/static/stores/food.png" mode="aspectFill"></image>
            <view class="store-info">
              <text class="store-name">罗森便利店</text>
              <text class="store-distance">6.1km</text>
              <view class="store-tag">便利店</view>
              <text class="store-hours">营业时间: 10:00-23:00</text>
              <text class="store-address">北京市朝阳区东城区某某路22号...</text>
            </view>
          </view>
        </view>
        <view class="store-row">
          <view class="store-item">
            <image src="/static/stores/cartoon.png" mode="aspectFill"></image>
            <view class="store-info">
              <text class="store-name">罗森便利店</text>
              <text class="store-distance">6.1km</text>
              <view class="store-tag">便利店</view>
              <text class="store-hours">营业时间: 10:00-23:00</text>
              <text class="store-address">北京市朝阳区东城区某某路22号...</text>
            </view>
          </view>
          <view class="store-item">
            <image src="/static/stores/tech.png" mode="aspectFill"></image>
            <view class="store-info">
              <text class="store-name">罗森便利店</text>
              <text class="store-distance">6.1km</text>
              <view class="store-tag">便利店</view>
              <text class="store-hours">营业时间: 10:00-23:00</text>
              <text class="store-address">北京市朝阳区东城区某某路22号...</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { login, getUserInfo } from '@/api/api.js';
export default {
  data() {
    return {
    }
  },
  computed: {
    containerStyle() {
      return {
        paddingTop: '0px' // 移除容器的顶部padding
      }
    },
   
  },
  onLoad() {
   
    
    // 获取微信登录授权code并调用登录API
    if (!uni.getStorageSync('token')) {
      this.wxLogin();
    } else {
      this.getUserInfo();
    }
  },
  methods: {
    // 微信登录授权
    wxLogin() {
      uni.login({
        provider: 'weixin',
        success: (loginRes) => {
          console.log('获取code成功', loginRes.code);
          // 调用登录API，传入code
          if (loginRes.code) {
            this.callLoginApi(loginRes.code);
          }
        },
        fail: (err) => {
          console.error('微信登录失败', err);
          uni.showToast({
            title: '登录失败，请重试',
            icon: 'none'
          });
        }
      });
    },
    
    // 调用登录API
    callLoginApi(code) {
      login(code).then(res => {
        console.log('登录成功', res);
        // 可以在这里处理登录成功后的逻辑
        this.getUserInfo();
      }).catch(err => {
        console.error('登录API调用失败', err);
      });
    },
    // 调用获取用户信息API
    getUserInfo() {
      getUserInfo().then(res => {
        uni.setStorageSync('userInfo', res);
      }).catch(err => {
        console.error('获取用户信息API调用失败', err);
      });
    }
  }
}
</script>

<style>
/* 整体容器 */
.container {
  min-height: 100vh;
  background-color: #f7f7f7;
  position: relative;
  padding-bottom: 100rpx;
}

/* 顶部位置和搜索栏 */
.header {
  background-color: #ffffff;
  padding: 20rpx 30rpx 30rpx;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.location {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.location text {
  color: #000000;
  font-size: 30rpx;
  font-weight: 500;
  margin-left: 10rpx;
}

.location-icon image {
  width: 36rpx;
  height: 36rpx;
}

.location-arrow {
  margin-left: 5rpx;
}

.location-arrow text {
  color: #888888;
  font-size: 22rpx;
  font-weight: normal;
}

.search-bar {
  background-color: #f2f2f2;
  height: 70rpx;
  border-radius: 8rpx;
  display: flex;
  align-items: center;
  padding: 0 20rpx;
}

.search-icon {
  width: 36rpx;
  height: 36rpx;
  margin-right: 15rpx;
  opacity: 0.5;
}

.search-placeholder {
  color: #888888;
  font-size: 28rpx;
}

/* 轮播广告区域 */
.banner-area {
  padding: 20rpx 30rpx;
}

.banner {
  height: 300rpx;
  border-radius: 20rpx;
  overflow: hidden;
}

.banner-item {
  height: 100%;
  border-radius: 20rpx;
}

.yellow-bg {
  background-color: #ffd100;
}

.banner-content {
  display: flex;
  height: 100%;
  padding: 30rpx;
}

.banner-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.korean-text {
  color: #000;
  font-size: 28rpx;
  font-weight: bold;
  margin-bottom: 5rpx;
}

.brand-text {
  color: #00c29a;
  font-size: 50rpx;
  font-weight: bold;
  margin: 10rpx 0;
}

.desc-text {
  color: #666;
  font-size: 24rpx;
  margin-bottom: 20rpx;
}

.discount-text {
  color: #f00;
  font-size: 40rpx;
  font-weight: bold;
}

.banner-image {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.banner-image image {
  width: 80%;
  height: 80%;
  object-fit: contain;
}

.banner-dots {
  display: flex;
  justify-content: center;
  margin-top: 20rpx;
}

.dot {
  width: 15rpx;
  height: 15rpx;
  border-radius: 50%;
  background-color: #ccc;
  margin: 0 5rpx;
}

.dot.active {
  background-color: #00c29a;
  width: 30rpx;
  border-radius: 10rpx;
}

/* 功能菜单区域 */
.menu-grid {
  background-color: #fff;
  padding: 30rpx;
  border-radius: 20rpx;
  margin: 0 30rpx 30rpx;
}

.menu-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30rpx;
}

.menu-row:last-child {
  margin-bottom: 0;
}

.menu-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 25%;
}

.menu-item image {
  width: 80rpx;
  height: 80rpx;
  margin-bottom: 15rpx;
}

.menu-item text {
  font-size: 24rpx;
  color: #333;
}

/* 兴趣推荐区域 */
.interest-section {
  margin: 0 30rpx;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.section-title {
  display: flex;
  align-items: center;
}

.indicator {
  width: 8rpx;
  height: 30rpx;
  background-color: #ffd100;
  margin-right: 10rpx;
  border-radius: 4rpx;
}

.section-title text {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.view-more {
  display: flex;
  align-items: center;
  color: #999;
  font-size: 24rpx;
}

.arrow {
  margin-left: 5rpx;
}

.store-grid {
  display: flex;
  flex-direction: column;
}

.store-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20rpx;
}

.store-item {
  width: 48%;
  background-color: #fff;
  border-radius: 15rpx;
  overflow: hidden;
}

.store-item image {
  width: 100%;
  height: 200rpx;
  object-fit: cover;
}

.store-info {
  padding: 15rpx;
}

.store-name {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
}

.store-distance {
  font-size: 24rpx;
  color: #999;
  margin-left: 10rpx;
}

.store-tag {
  display: inline-block;
  background-color: #e8f9f5;
  color: #00c29a;
  font-size: 22rpx;
  padding: 5rpx 10rpx;
  border-radius: 5rpx;
  margin-top: 10rpx;
}

.store-hours, .store-address {
  font-size: 22rpx;
  color: #999;
  margin-top: 10rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 底部导航 */
.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100rpx;
  background-color: #fff;
  display: flex;
  border-top: 1rpx solid #eee;
}

.tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.tab-item image {
  width: 50rpx;
  height: 50rpx;
  margin-bottom: 5rpx;
}

.tab-item text {
  font-size: 22rpx;
  color: #999;
}

.tab-item.active text {
  color: #07C160;
}
</style>


